<template>
	<el-container>
		<el-aside width="200px">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
				</el-main>
			</el-container>
		</el-aside>
        <el-container>
			<el-header>
				<div class="right-panel">
                    <div class="search-input">物料类别</div>
                    <el-select v-model="search.cate_id" placeholder="请选择" clearable>
                        <el-option label="毛料" :value="1"></el-option>
                        <el-option label="辅料" :value="2"></el-option>
                        <el-option label="其他" :value="3"></el-option>
                    </el-select>
                    <div class="search-input">物料名称</div>
                    <el-select v-model="search.material_id"  filterable clearable>
                        <el-option v-for="item in material" :key="item.id" :label="item.material_name" :value="item.id"/>
                    </el-select>
                    <div class="search-input">供应商</div>
                    <el-select v-model="search.supplier_id"  filterable placeholder="请选择供应商" clearable>
                        <el-option v-for="item in applyList" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"/>
                    </el-select>
                    <el-input v-model="search.keyword" placeholder="颜色/色号" clearable @change="handleKeyDown" />
                    <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                    <!-- <el-button type="primary" >导出库存表</el-button>
            	    <el-button type="primary" >批量生产</el-button> -->
                    <!-- <div class="finish">
                        <div class="finishNum">库存总数:<div class="text">{{total_stock}}</div></div>
                    </div> -->
				</div>
                <!-- <div class="right-panel-search">
                    <el-button type="primary" >导出库存表</el-button>
            	    <el-button type="primary" >批量生产</el-button>
                </div> -->
                <div class="finish">
                    <div class="finishNum">库存总数:<div class="text">{{total_stock}}</div></div>
                </div>
			</el-header>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="apiObj" stripe remoteSort remoteFilter border @setExtend="setExtend">
					<el-table-column type="selection" width="50" align="center"></el-table-column>
					<el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
					<el-table-column label="物料名称" prop="material_name" align="center" width="150"></el-table-column>
					<el-table-column label="物料SKC" prop="materialSpec.skc" align="center" width="150">
                        <template #default="scope">
                            <div v-if="scope.row.materialSpec">
                                {{scope.row.materialSpec.skc}}
                            </div>
						 </template>
                    </el-table-column>
                    <el-table-column label="供应商" prop="referred_as" align="center" width="150"></el-table-column>
                    <el-table-column label="色号" prop="materialSpec.color_number" align="center" width="150">
                        <template #default="scope">
                            <div v-if="scope.row.materialSpec">
                                {{scope.row.materialSpec.color_number}}
                            </div>
						 </template>
                    </el-table-column>
                    <el-table-column label="颜色" prop="materialSpec.colour" align="center" width="150">
                        <template #default="scope">
                            <div v-if="scope.row.materialSpec">
                                {{scope.row.materialSpec.colour}}
                            </div>
						 </template>
                    </el-table-column>
                    <el-table-column label="库存数量" prop="curr_stock" align="center" width="150"></el-table-column>
					<el-table-column label="图片" prop="datetime" align="center" width="150">
                        <template #default="scope">
							<el-image v-if="scope.row.materialSpec" style="width: 50px; height: 50px; border-radius: 5px;" :src="scope.row.materialSpec.image" :preview-src-list="[scope.row.materialSpec.image]" preview-teleported="true" hide-on-click-modal ></el-image>
						 </template>
                    </el-table-column>
					<el-table-column label="首次入库" prop="create_time" align="center" width="150"></el-table-column>
					<el-table-column label="末次入库" prop="create_time" align="center" width="150"></el-table-column>
					<el-table-column label="仓库" prop="ware_name" align="center" width="150"></el-table-column>
					<el-table-column label="库位" prop="ware_location_name" align="center" width="150"></el-table-column>
                    <el-table-column label="操作" fixed="right" align="center" width="100">
                        <template #default="scope">
							<el-button-group>
								<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看批次</el-button>
								<el-button text type="primary" size="small" @click="table_detail(scope.row, scope.$index)">查看明细</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>
    <batch-save v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></batch-save>
    <batah-detail v-if="dialog.detail" ref="detailDialog" @success="handleSuccess" @closed="dialog.detail = false" draggable :query="{id:this.id}"></batah-detail>
</template>
<script>
import BatahDetail from './batahDetail.vue';
import batchSave from './batchSave.vue';
export default {
  components: { batchSave, BatahDetail },
	name: 'user',
	data() {
		return {
            dialog: {
				save: false,
                detail:false
			},
			groupFilterText: '',
			apiObj: this.$API.inventory.material,
            cates: [],
            group: [],
            search:{
                material_id:null,
                cate_id:null,
                supplier_id:null,
                keyword:null,
            },
            material:[],
            applyList:[],
            total_stock:0,
            id:""
		}
	},
	watch: {
        groupFilterText(val) {
            this.$refs.group.filter(val);
        },
    },
    mounted() {
        this.getMaterial()
        this.getGroup()
        this.getApply()
	},
	methods: {
        async setExtend(data){
            this.total_stock = data.total_stock
        },
        async getGroup() {
			var res = await this.$API.all.ware.get();
			var allNode = { id: '', label: '所有' }
			res.data.unshift(allNode);
			this.group = res.data;
			this.group.map((item) => {
				if(item.ware_name) {
					item.label = item.ware_name
				}
			})
		},
		//树过滤
        groupFilterNode(value, data){
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //树点击事件
        groupClick(data){
            var params = {
                warehouse_id: data.id
            }
            this.$refs.table.reload(params)
        },
        // 获取所有物料
        async getMaterial(){
            var res = await this.$API.all.material.get();
            this.material = res.data;
        },
        // 获取供应商
        async getApply(){
            var res = await this.$API.all.Apply.get({type:-1});
            this.applyList = res.data;
        },
        //搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
        // 查看批次
        table_show(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add").setData(row);
			});
		},
        // 查看明细
        table_detail(row) {
            this.id = row.id
			this.dialog.detail = true;
			this.$nextTick(() => {
				this.$refs.detailDialog.open("add").setData(row);
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.search-input {
	width: auto;
	font-size: 14px;
}
// .right-panel-search{
//     margin-right: 20px;
// }
.inputDeep {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    height: 20px;
    background: transparent;
    cursor: default;
    .el-input__inner {
      cursor: default !important;
    }
  }
}
.finish{
    display: flex;
    align-items: center;
    font-size: 20px;
    .finishNum{
        display: flex;
        align-items: flex-end;
        margin-right:12px;
    }
    .text{
        font-size: 18px;
        color: #409EFF;
        margin-left: 4px;
        font-weight: 600;
    }
}
</style>
